<template>
    <div class="list_box">
        <div class="search">
            <div class="tab">
                选择类型：<el-select v-model="type" placeholder="选择类型">
                    <el-option
                        v-for="item in types"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </div>
            <div class="tab">
                输入标题：<el-input
                    v-model="title"
                    style="width: 220px"
                ></el-input>
            </div>
            <el-button type="primary" @click="search">搜索</el-button>
        </div>
        <div class="table">
            <el-table
                :data="list"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                row-key="id"
                :row-style="{ height: '30' }"
            >
                <el-table-column
                    prop="title"
                    label="标题"
                    width="180"
                    align="center"
                />
                <el-table-column prop="content" label="文章内容" align="center">
                    <template #default="scope">
                        <div style="height: 30px">
                            {{ scope.row.content }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="create_name"
                    label="创建人"
                    width="180"
                    align="center"
                />
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button
                            link
                            type="primary"
                            size="small"
                            @click="() => editArt(scope.row)"
                            >编辑</el-button
                        >
                        <el-button
                            link
                            type="primary"
                            size="small"
                            @click="deleteArt(scope.row)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                layout="prev, pager, next"
                :total="pageInfo.total"
                :page-size="pageInfo.pageSize"
                :current-page="pageInfo.current"
                class="pagination"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onBeforeMount, reactive } from 'vue';
import { artList, artTypes, artDeltele } from '@/api/atr';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const pageInfo = reactive<any>({
    page: 1,
    pageSize: 20,
    current: 1,
    toal: 0,
});
const title = ref<string>('');
const type = ref<number | string>('');
const list = ref<object[]>([]);
const types = ref<any[]>([]);
onBeforeMount(() => {
    getTypes();
    getList();
});
const getTypes = () => {
    artTypes().then((res: any) => {
        if (res.code === 0) {
            types.value = res.data;
        }
    });
};
const search = () => {
    getList();
};
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: any;
    rowIndex: number;
}) => {
    if (rowIndex % 2 === 0) {
        return 'warning-row';
    }
};
// 获取文章列表
const getList = () => {
    artList({
        page: pageInfo.page,
        pageSize: pageInfo.pageSize,
        title: title.value,
        type: type.value,
    }).then((res: any) => {
        if (res.code === 0) {
            console.log('liebiao', res);
            list.value = res.data.articles;
            pageInfo.current = res.data.page / 1;
            pageInfo.total = res.data.total;
        }
    });
};
const handleCurrentChange = (val: number) => {
    pageInfo.page = val;
    getList();
};
// 删除文章
const deleteArt = (item: any) => {
    artDeltele({ id: item.id }).then((res: any) => {
        if (res.code === 0) {
            getList();
        }
    });
};
// 编辑文章
const editArt = (item: any) => {
    console.log('router', router);
    router.push({
        path: '/articleManager/create',
        query: {
            id: item.id,
        },
    });
};
</script>
<style lang="scss" scoped>
.list_box {
    overflow: hidden;
    background-color: #fff;
    padding: 20px;
    .search {
        overflow: hidden;
        display: flex;
        flex-direction: row;
        .tab {
            margin-right: 20px;
        }
    }
    .table {
        margin-top: 20px;
    }
    .pagination {
        margin-top: 20px;
    }
}
</style>
<style lang="scss">
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
